<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>创建活动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}"
          media="all"/>
    <link rel="stylesheet" href="../../../static/back_css/create_activity.css"
          th:href="@{/back_css/create_activity.css}" media="all">
</head>
<body>
<div th:if="${isSup}==true" style="margin: 350px 500px;width: 500px">
    <h3 style="color: red">您没有权限创建活动！如需创建活动请联系超级管理人员！</h3>
    <button onclick="backLogin()" style="margin-left: 360px; margin-top: 137px;">返回登录</button>
</div>
<div id="main" th:if="${isSup}==false">
    <div class="content ">
        <form class="layui-form content1" id="basic_info" action="" method="post">
            <div class="layui-form_bottom">
                <span>活动详情</span>
                <button type="button" id="btn1_cancel" class="layui-btn layui-btn-warm layui-btn-radius layui-bg-grays">
                    取消
                </button>
                <button type="button" id="btn_nextstep"
                        class="layui-btn layui-btn-warm layui-btn-radius layui-bg-oranges">下一步
                </button>
            </div>
            <div class="layui-form_content">
                <div class="layui-form-item">
                    <label class="layui-form-label">活动标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="ACTIVITY_NAME" id="ACTIVITY_NAME" lay-verify="title" autocomplete="off"
                               placeholder="请输入活动标题"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">活动封面</label>
                    <div class="layui-input-block jacket_btn">
                        <input name="ACTIVITY_IMG" id="ACTIVITY_IMG" type="file" class="layui-input upload_jacket"
                               accept="image/*">
                        <div class="upload_jacket_img">
                            <sapn>请上传PNG、JPG、GIF等格式</sapn>
                        </div>
                        <span class="prompt">请上传尺寸为750*360px的PNG、JPG、GIF图片，大小&lt;10M</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">活动详情</label>
                    <div class="layui-input-block">
                        <!--<textarea placeholder="请输入活动简介" id="ACTIVITY_DETAILS" class="layui-textarea"-->
                                  <!--name="ACTIVITY_DETAILS"></textarea>-->
                        <textarea placeholder="请输入活动简介" id="ACTIVITY_DETAILS"
                                  name="ACTIVITY_DETAILS"></textarea>
                    </div>
                </div>
            </div>

        </form>
        <form class="layui-form content2" id="time_prize_info" action="" method="post">
            <div class="layui-form-bottom ">
                <span>活动详情</span>
                <button type="button" id="btn2_cancel" class="layui-btn layui-btn-warm layui-btn-radius layui-bg-grays">
                    取消
                </button>
                <button type="button" class="layui-btn layui-btn-warm layui-btn-radius layui-bg-reds" id="btn_prevstep">
                    上一步
                </button>
                <button type="button" lay-filter="sign" lay-submit
                        class="layui-btn layui-btn-warm layui-btn-radius layui-bg-oranges">确定
                </button>
            </div>
            <div class="layui-form-content">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label label_color">活动时间设置</label>
                        <div class="layui-input-inline date_border">
                            <i class="layui-icon layui-icon-date"></i>
                            <input id="global_start_time" type="text" name="start_date" lay-verify="datetime"
                                   placeholder="设置开始时间" autocomplete="off"
                                   class="layui-input date">
                        </div>
                        <div class="layui-input-inline date_border">
                            <i class="layui-icon layui-icon-date"></i>
                            <input id="global_end_time" type="text" name="end_date" lay-verify="datetime"
                                   placeholder="设置结束时间" autocomplete="off"
                                   class="layui-input date">
                        </div>
                        <div class="layui-input-inline open_create">
                            <input type="checkbox" name="detail_time_open" lay-filter="detail_time_open"
                                   lay-skin="primary" title="开启详细时间设置">
                        </div>
                    </div>
                    <div class="layui-inline add_time">
                        <button class="layui-btn" id="add_match_time_item">添加</button>
                        <span class="prompt">最多添加4个时间段</span>
                    </div>
                </div>
                <div id="match_date_list">


                </div>
                <div class="prize_item_list">
                    <div class="layui-inline">
                        <label class="layui-form-label label_color">活动奖项设置</label>
                        <div class="layui-input-inline add_prize">
                            <button class="layui-btn" id="add_prize_item">添加</button>
                            <span class="prompt">最多添加3个</span>
                        </div>
                    </div>
                    <div id="prize_name_list">

                    </div>

                    <div class="layui-inline prize_rule">
                        <label class="layui-form-label">获奖规则</label>
                        <div class="layui-inline">
                            <textarea placeholder="请输入内容" id="PRIZE_RULE" name="rule" class="layui-textarea"
                                      style="width: 773px;"></textarea>
                        </div>
                    </div>

                    <div class="layui-inline prize_rule">
                        <label class="layui-form-label" style="color: red;font-size: 21px">注意！</label>
                        <div class="layui-inline">
                            <h2 style="color: red">创建完成该活动后如需更改设置请到“活动详情”>>“活动设置”中设置具体事项！</h2>
                            <h4 style="color: red">该活动默认设置如下：</h4>
                            <h6 style="color: red">手机端是否显示：显示</h6>
                            <h6 style="color: red">投票设置：未开始</h6>
                            <h6 style="color: red">报名是否结束：未结束</h6>
                            <h6 style="color: red">该活动每人上传作品数：1</h6>
                            <h6 style="color: red">每天每人点赞次数：3</h6>
                            <h6 style="color: red">每天对同一作品点赞数：1</h6>
                            <h6 style="color: red">管理员是否提交作品 ：不提交</h6>
                            <h6 style="color: red">手机展示作品阶段：审核通过之前</h6>
                            <h6 style="color: red">上传作品类型：视频、音频、范文朗读</h6>
                            <h6 style="color: red">各地区提交作品数量：10</h6>
                            <h6 style="color: red">活动状态：进行中</h6>
                            <h6 style="color: red">手机端是否进入该活动：是</h6>
                            <h6 style="color: red">手机端是否显示获奖名单：不显示</h6>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>

</div>


<datalist class="race_stage" id="match_name_list" name="matchset">
    <option value="初赛"></option>
    <option value="复赛"></option>
    <option value="决赛"></option>
</datalist>
<script type="text/html" id="match_date_item">
    <form class="layui-form-item match">
        <div class="match_name">
            <input class="layui-input" type="text" name="STAGE_NAME" list="match_name_list" placeholder="名称！">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label time_set">时间设置</label>
            <div class="layui-input-inline date_border">
                <i class="layui-icon layui-icon-date"></i>
                <input type="text" name="match_start_date" lay-verify="datetime" placeholder="1970-01-01" autocomplete="off"
                       class="layui-input date">
            </div>
            <label class="layui-form-label date_set1">至</label>
            <div class="layui-input-inline date_border">
                <i class="layui-icon layui-icon-date"></i>
                <input type="text" name="match_end_date" lay-verify="datetime" placeholder="1970-01-01" autocomplete="off"
                       class="layui-input date ">
            </div>
        </div>
        <button type="button" class="layui-btn matchtime_del">删除</button>
    </form>
</script>
<script type="text/html" id="prize_name_item">

    <form class="layui-form-item prize_item">
        <div class="layui-inline">
            <label class="layui-form-label time_set">奖项名称</label>
            <div class="layui-input-inline date_border">
                <input type="text" autocomplete="off" class="layui-input" name="PRIZE_NAME">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label people_num">人数</label>
            <div class="layui-input-inline date_border">
                <input type="number" autocomplete="off" class="layui-input" name="PRIZE_USERNUMBER">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label people_num">奖品</label>
            <div class="layui-input-inline date_border">
                <input type="text" autocomplete="off" class="layui-input" name="PRIZE_GOODS">
            </div>
        </div>
        <button class="layui-btn prizename_del">删除</button>
        <div class="layui-form-item">
            <label class="layui-form-label time_set">奖品封面</label>
            <div class="layui-input-block jacket_btn1">
                <input type="file" class="layui-input upload_jacket1" accept="image/*" name="PRIZE_GOODS_IMG">
                <div class="upload_jacket_img1">
                </div>
                <span class="prompt">请上传尺寸为750*360px的PNG、JPG、GIF图片，大小不超过10M</span>
            </div>
        </div>
    </form>
</script>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<script type="text/javascript">
    var laydate;
    var $;
    layui.use(['form', "laydate", "jquery", "element", 'layer',"layedit"], function () {
        var form = layui.form,
            layer = layui.layer;
        var element = layui.element;
        $ = layui.jquery;
        var layedit = layui.layedit;
        laydate = layui.laydate;
        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        }
        htmlss = layedit.build('ACTIVITY_DETAILS', {//建立编辑器
            tool: ['strong' //加粗
                ,'italic' //斜体
                ,'underline' //下划线
                ,'del' //删除线
                ,'left' //左对齐
                ,'center' //居中对齐
                ,'right' //右对齐
                ,'link' //超链接
                ,'unlink' //清除链接
                ,'face'
            ]
        });
        $(document).ready(function () {
            $("#btn_nextstep").click(function () {//点击下一步
                var ACTIVITY_NAME = $("#ACTIVITY_NAME").val();
                var ACTIVITY_IMG = $("#ACTIVITY_IMG").val();
                // var ACTIVITY_DETAILS = $("#ACTIVITY_DETAILS").val();
                if (ACTIVITY_NAME != '' && ACTIVITY_IMG != '' && ACTIVITY_DETAILS != '') {
                    $(".content1").animate({left: '-1000px'});
                    $(".content2").animate({left: '0'});
                } else {
                    layer.msg("请将信息填完整！")
                }
            });
        });
        $(document).ready(function () {
            $("#btn_prevstep").click(function () {
                $(".content1").animate({left: '0'});
                $(".content2").animate({left: '1000px'});
            });
        });

        $(".upload_jacket").on("change", function (a, b) {
            //console.log(this.files[0]);
            var img = window.URL.createObjectURL(this.files[0]);
            //console.log(img)
            $(".upload_jacket_img").css("content", "url(" + img + ")");
            $(".upload_jacket_img>span").hide();
        });
        laydate.render({
            elem: $("#global_start_time")[0],
            type:'datetime',
            done: function (a, b, c) {
            }
        });

        laydate.render({
            elem: $("#global_end_time")[0],
            type:'datetime',
            done: function (a, b, c) {
            }
        });

        form.on("submit(sign)", function (data) {
            var html =layedit.getContent(htmlss);
            var ACTIVITY_NAME = $("#ACTIVITY_NAME").val();//活动名称
            var ACTIVITY_STARTTIME = $("#global_start_time").val();//开始时间
            var ACTIVITY_ENDTIME = $("#global_end_time").val();//开始时间
            var PRIZE_RULE = $("#PRIZE_RULE").val();//获奖规则
            if(ACTIVITY_NAME.length>60){
                alert("您设置的活动名称已超过字数最大限制！");
                return;
            }
            if(PRIZE_RULE.length>2000){
                alert("您设置的获奖规则已超过字数最大限制！");
                return;
            }
            var formData = new FormData();
            formData.append("file", $('#ACTIVITY_IMG')[0].files[0]);
            formData.append("ACTIVITY_NAME", ACTIVITY_NAME);
            formData.append("ACTIVITY_DETAILS", html);
            formData.append("STARTTIME", ACTIVITY_STARTTIME);
            formData.append("ENDTIME", ACTIVITY_ENDTIME);
            formData.append("PRIZE_RULE", PRIZE_RULE);
            var time_info = [];
            $("#match_date_list").children("form").each(function (index, item) {
                time_info.push($(item).serializeObject())
            });
            if(time_info.length!=0){
                formData.append("STAGE_IS_OPEN", 1);
                formData.append("STAGE_1ST_NAME",time_info[0].STAGE_NAME);
                formData.append("ST1_STARTTIME", time_info[0].match_start_date);
                formData.append("ST1_ENDTIME", time_info[0].match_end_date);
                formData.append("STAGE_1ST_WIN", 0);
                if(time_info[1]!=null){
                    formData.append("STAGE_2ND_NAME",time_info[1].STAGE_NAME);
                    formData.append("ST2_STARTTIME", time_info[1].match_start_date);
                    formData.append("ST2_ENDTIME", time_info[1].match_end_date);
                    formData.append("STAGE_2ND_WIN", 0);
                }
                if(time_info[2]!=null){
                    formData.append("STAGE_3RD_NAME",time_info[2].STAGE_NAME);
                    formData.append("ST3_STARTTIME", time_info[2].match_start_date);
                    formData.append("ST3_ENDTIME", time_info[2].match_end_date);
                    formData.append("STAGE_3RD_WIN", 0);
                }
                if(time_info[3]!=null){
                    formData.append("STAGE_4TH_NAME",time_info[3].STAGE_NAME);
                    formData.append("ST4_STARTTIME", time_info[3].match_start_date);
                    formData.append("ST4_ENDTIME", time_info[3].match_end_date);
                    formData.append("STAGE_4TH_WIN", 0);
                }
            }else {
                formData.append("STAGE_IS_OPEN", 0);
            }

            var prize_info = [];
            $("#prize_name_list").children("form").each(function (index, item) {
                var tmp=$(item).serializeObject();
                tmp.PRIZE_GOODS_IMG=$(item).find(".upload_jacket1")[0].files[0];
                prize_info.push(tmp)
            });

            //console.log(prize_info)
            if(prize_info.length!=0){
                formData.append("PRIZE1_GOODS",prize_info[0].PRIZE_GOODS);
                formData.append("PRIZE1_GOODS_IMG", prize_info[0].PRIZE_GOODS_IMG);
                formData.append("PRIZE1_NAME", prize_info[0].PRIZE_NAME);
                formData.append("PRIZE1_USERNUMBER", prize_info[0].PRIZE_USERNUMBER);
                if(prize_info[1]!=null){
                    formData.append("PRIZE2_GOODS",prize_info[1].PRIZE_GOODS);
                    formData.append("PRIZE2_GOODS_IMG", prize_info[1].PRIZE_GOODS_IMG);
                    formData.append("PRIZE2_NAME", prize_info[1].PRIZE_NAME);
                    formData.append("PRIZE2_USERNUMBER", prize_info[1].PRIZE_USERNUMBER);
                }else{
                    formData.append("PRIZE2_GOODS",null);
                    formData.append("PRIZE2_GOODS_IMG", $('#ACTIVITY_IMG')[0].files[0]);
                    formData.append("PRIZE2_NAME", null);
                    formData.append("PRIZE2_USERNUMBER", null);
                }
                if(prize_info[2]!=null){
                    formData.append("PRIZE3_GOODS",prize_info[2].PRIZE_GOODS);
                    formData.append("PRIZE3_GOODS_IMG", prize_info[2].PRIZE_GOODS_IMG);
                    formData.append("PRIZE3_NAME", prize_info[2].PRIZE_NAME);
                    formData.append("PRIZE3_USERNUMBER", prize_info[2].PRIZE_USERNUMBER);
                }else{
                    formData.append("PRIZE3_GOODS",null);
                    formData.append("PRIZE3_GOODS_IMG", $('#ACTIVITY_IMG')[0].files[0]);
                    formData.append("PRIZE3_NAME", null);
                    formData.append("PRIZE3_USERNUMBER", null);
                }
            }else{
                formData.append("PRIZE1_GOODS",null);
                formData.append("PRIZE1_GOODS_IMG", $('#ACTIVITY_IMG')[0].files[0]);
                formData.append("PRIZE1_NAME", null);
                formData.append("PRIZE1_USERNUMBER", null);
                formData.append("PRIZE2_GOODS",null);
                formData.append("PRIZE2_GOODS_IMG", $('#ACTIVITY_IMG')[0].files[0]);
                formData.append("PRIZE2_NAME", null);
                formData.append("PRIZE2_USERNUMBER", null);
                formData.append("PRIZE3_GOODS",null);
                formData.append("PRIZE3_GOODS_IMG", $('#ACTIVITY_IMG')[0].files[0]);
                formData.append("PRIZE3_NAME", null);
                formData.append("PRIZE3_USERNUMBER", null);
            }



            //console.log(prize_info)
            $.ajax({
                url: '/addActivity',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success: function (result) {
                    window.location.href='/backLogin';
                }
            })

            return false;
        })
        form.on("select()", function (obj) {


        });
        form.on("checkbox(detail_time_open)", function (obj) {
            if (obj.elem.checked) {

                if ($("#global_start_time").val() == "" || $("#global_end_time").val() == "") {

                    layer.msg("请先设置开始和结束时间")
                    obj.elem.checked = false;
                    obj.othis.removeClass("layui-form-checked");
                    return;
                }
                $(".add_time").css("display", "inline-block");


            } else {
                $(".add_time").css("display", "none");
                $("#match_date_list").empty();
            }
        })

        $("#match_date_list").on("click", ".matchtime_del", function (e) {

            if ($(this).parent().next().length <= 0) {

                //无前无后
                if ($(this).parent().prev().length <= 0) {
                    //直接删
                } else {//有前无后
                }
            } else {
                //有后无前
                if ($(this).parent().prev().length <= 0) {
                    $(this).parent().next().find(".date").first().val($(this).parent().find(".date").first().val());
                    $(this).parent().next().find(".date").first().prop("disabled", true);
                } else {//有前有后
                    //更新前一个的结束日期
                    //
                    // $(this).parent().next().find(".date").first().val($(this).parent().prev().find(".date").last().val());
                }
            }
            $(this).parent(".match").remove();
            return false;
        });
        $("#add_match_time_item").click(function (event) {//添加时间

            var s = $("#match_date_list").children().length;
            if (s < 4) {
                //设置第一项
                $("#match_date_list").append($("#match_date_item").html());
                s++;
                //使时间指示器生效
                $("#match_date_list").children().last().find(".date").each(function (index, item) {
                    laydate.render({
                        elem: item,
                        type: 'datetime',

                        //点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                        done: function (value, date, endDate) {

                        }

                    });

                })
                //添加时期同步更新


            } else {
                layer.msg("最多支持添加4个时间段！")
            }
            return false;
        });

        $("#add_prize_item").click(function (event) {//添加奖项

            var s = $("#prize_name_list").children().length;
            if (s < 3) {

                $("#prize_name_list").append($("#prize_name_item").html());

                $("#prize_name_list").each(function (index, item) {
                    $(".prizename_del").on("click", function () {
                        if ($(this).parent(".prize_item")) {
                            $(this).parent(".prize_item").remove();
                        }
                        return false;
                    });
                    $(".upload_jacket1").on("change", function (a, b) {
                        //console.log(this.files[0]);
                        var img = window.URL.createObjectURL(this.files[0]);
                        //console.log(img)
                        $(this).next(".upload_jacket_img1").css("content", "url(" + img + ")");
                        // $(".upload_jacket_img1").css_bak("content", "url(" + img + ")");
                        $(this).next(".upload_jacket_img1>span").hide();
                        // $(".upload_jacket_img1>span").hide();
                        // $("#show").attr("src",img);
                    });
                })
            } else {
                layer.msg("最多支持添加3个奖项！")
            }

            return false;
        });

        $("#btn1_cancel").on("click", function () {
            window.location.href = '/getAllActivity';
        });
        $("#btn2_cancel").on("click", function () {
            window.location.href = '/getAllActivity';
        });

        function hideImg(img_position) {
            $(".img_position").css("display", "block");
        }
    })

    function backLogin() {
        window.location.href='/backLogin';
    }
</script>
</body>
</html>